import React, {Component} from "react";
import {HashRouter as Router,Link} from "react-router-dom";
import './register.css';
import axios from 'axios';

var getPhoneNum='#';
var pass='2';
var pass_2='3';
var flag=false;

class Register extends Component{

    constructor(props) {
        super(props);
        this.state={
            checkNum:"",
            check_flag:false,
            psw_flag:false
        }
        this.check = this.check.bind(this);
    }

    check(){
        getPhoneNum=document.getElementById('phoneNum').value;
        if(getPhoneNum==''||getPhoneNum=='#'){
            alert('手机号不能为空');
            return;
        }
        axios.get(global.routes.database+'/checkUser',{
            params:{
                phoneNum:getPhoneNum
            }
        }).then((res)=>{
            if(res.data.Code==1){
                flag=true;
            }else{
                alert(res.data.Msg);
            }
        })
    }

    submit(){
        if(flag==false){
            alert('请输入正确的手机号！');
            return;
        }
        getPhoneNum=document.getElementById('phoneNum').value;
        pass=document.getElementById('psw').value;
        pass_2=document.getElementById('psw_a').value;
        if(pass!==pass_2){
            alert('两次密码不一致');
            return;
        }
        axios.get(global.routes.database+'/register',{
            params:{
                phoneNum:getPhoneNum,
                psw:pass
            }
        }).then((res)=>{
            alert('注册成功！请进行登录');
            window.location.href = '#/terran/my';
        })
    }

    render() {
        return (
            <div className="register">

                <div className="header navbar navbar-light bg-light">
                    <Router>
                        <Link to='/terran/my'>
                            <img src={require("./back.png")} width="40px" height="50px" alt="返回"/>
                        </Link>
                    </Router>
                    <p className='title'>基金交易及安全开户</p>
                </div>

                <div className="myform">
                    <form onSubmit={this.submit_a} style={{position:'relative'}}>
                        <div className="form-group input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text" id="basic-addon1">&nbsp;手机号&nbsp;&nbsp;</span>
                            </div>
                            <input id="phoneNum" type="text" className="form-control" placeholder="请输入手机号" aria-label="Username"
                                   aria-describedby="basic-addon1" onBlur={this.check}/>
                        </div>
                        <div className="form-group input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text" id="basic-addon1">设置密码</span>
                            </div>
                            <input id="psw" type="password" className="form-control" placeholder="请输入密码" aria-label="Username"
                                   aria-describedby="basic-addon1"/>
                        </div>
                        <div className="form-group input-group mb-3">
                            <div className="input-group-prepend">
                                <span className="input-group-text" id="basic-addon3">确认密码</span>
                            </div>
                            <input id="psw_a" type="password" className="form-control" placeholder="请确认密码" aria-label="Username"
                                   aria-describedby="basic-addon1"/>
                        </div>
                        <button className="register-button" onClick={this.submit.bind(this)}>立即开户</button>
                    </form>
                </div>
            </div>
        );
    }

}

export default Register;